import React, {useEffect} from 'react';
import {Alert, App, Button, Card, Popconfirm, Table} from "antd";
import {Link, useNavigate, useParams} from "react-router-dom";
import {requestDelete, requestGet} from "util/request";
import {SecurityUserType} from "type/SecurityUser";
import {ColumnsType} from "antd/es/table";
import {AlertProps} from "antd/lib";
import ButtonGroup from "antd/es/button/button-group";
import {fetchDeleteRole} from "../../../redux/reducer/roleReducer";
import {useAppDispatch} from "../../../redux/hook";

const userColumns: ColumnsType<SecurityUserType> = [
    {
        dataIndex: 'index',
        title: '序号' ,
        width: 60,
        align: "center" ,
        key: 'index',
        render: (value, record, index) => {
            return <strong> {index + 1} </strong> ;
        }
    },
    {
        title: '用户编号',
        dataIndex: 'id',
        key: 'id',
    },
    {
        title: '用户名',
        dataIndex: 'username',
        key: 'username',
    },
    {
        title: '用户身份',
        dataIndex: 'identity',
        key: 'identity',
    }
] ;

const RoleDeleteComponent = () => {

    const {roleId,authority} = useParams() ;
    const [loading, setLoading] = React.useState<boolean>(true);
    const [data, setData] = React.useState<SecurityUserType[]>([]) ;
    const [alterData, setAlterData] = React.useState<AlertProps>({}) ;
    const { message } = App.useApp();
    const dispatch = useAppDispatch() ;
    const navigate = useNavigate();

    useEffect(() => {
      requestGet<SecurityUserType[]>("/manager/security-user-role/users/" + roleId)
          .then(res =>{
              setLoading(false) ;
              setData(res.data) ;
              if (res.data.length > 0){
                    setAlterData({
                        message: `角色 [${roleId}] 关系冲突`,
                        description: "删除角色前请先解除以下用户与角色的关联!",
                        type: "error",
                        showIcon: true,
                    }) ;
              }else {
                    setAlterData({
                        message: "角色冲突解除，可以删除角色",
                        type: "success",
                        showIcon: true,
                    }) ;
              }
          }) ;
    },[]) ;
    /**
     * 解除角色冲突按钮回调
     */
    const deconflictionClick =() => {
        requestDelete<number>("/manager/security-user-role/" + roleId , {} )
            .then(res => {
                if (res.data > 0){
                    message.success("解除角色冲突成功") ;
                    setData([]) ;
                    setAlterData({
                        message: "角色冲突解除，可以删除角色",
                        type: "success",
                        showIcon: true,
                    }) ;
                }else {
                    message.error("解除角色冲突失败") ;
                }
            }) ;
    }
    /**
     * 删除角色按钮回调
     */
    const deleteRoleClick = async () => {
        let res = await dispatch(fetchDeleteRole(roleId)).unwrap().then(originRes => originRes);
        if (res > 0){
            message.success("删除角色成功")
                .then(() =>navigate("../",{replace: true})) ;
        }else {
            message.info("删除角色失败") ;
        }
    }
    return (
        <Card
            title={`删除角色 [${authority}]`}
            extra={<Link key={"role-list"} to={"../"}>角色列表</Link>}
        >
            <ButtonGroup>
                <Popconfirm title={"是否确认删除角色信息!"} onConfirm={deleteRoleClick}>
                    <Button disabled={data.length !== 0} key={"role-delete"} type={"primary"} danger>删除角色信息</Button>
                </Popconfirm>
                <Button onClick={deconflictionClick} disabled={data.length === 0} key={"role-deconfliction"} type={"primary"}>解除角色冲突</Button>
            </ButtonGroup>
            <Table
                title={() => <Alert {...alterData}/>}
                loading={loading}
                dataSource={data}
                columns={userColumns}
            />
        </Card>
    );
};

export default RoleDeleteComponent;